<!--
 * @Author: Liu
 * @Date: 2023-05-08 10:52:05
 * @LastEditTime: 2023-05-18 18:56:47
-->


<!-- 奖品 -->

<template>
    <div class="rule-box" v-show="props.isShow">
        <div :class="['prize-inner', 'dialog-inner', props.isShow && 'scale-in-center']">
            <div class="title">我的奖品</div>
            <div class="content">
                <div class="item title">
                    <div class="item_left">
                        获奖时间
                    </div>
                    <!-- <div class="item_left">
                        获奖记录
                    </div> -->
                    <div class="item_right">
                        奖品名称
                    </div>
                </div>
                <div class="item" v-for="(item) in state.prize_list" :key="'item' + item">
                    <div class="item_left">
                        <p>{{ item.created_date }}</p>
                        <!-- <p>{{ item.extra }}</p> -->
                    </div>
                    <!-- <div class="item_left">
                        {{ item.extra }}
                    </div> -->
                    <div class="item_right">
                        {{ item.name }}
                    </div>
                </div>
                <div class="none" v-if="!state.prize_list || state.prize_list.length <= 0">
                    您还没有中奖记录哦！
                </div>
            </div>
            <div class="prize-addr">
                <div class="input-item">
                    <div class="label">手机号</div>
                    <div class="value"><input v-model="info.i_phone" type="tel" placeholder="请输入收货人手机号" /></div>
                </div>
                <div class="input-item">
                    <div class="label">地址</div>
                    <div class="value"><input v-model="info.i_address" placeholder="请输入收货地址" /></div>
                </div>
            </div>
            <div class="footer">
                <p>收件信息用于接受实物奖品，若未中实物可不填写</p>
                <div>
                    <div class="btn" role="button" @click="handleConfirm">确认</div>
                </div>
                <!-- <p>
                    ①实体奖励将在活动结束后7个工作日内以代金券形式发放，请在有效期内及时兑换领取；
                    <br />
                    ②U币奖励于活动结束后10个工作日内发放，用户可前往【我的U币】查看U币到账情况。
                </p> -->
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { reactive, onMounted } from "vue"
import { useRouter } from "vue-router";
import { getGifts, userInfoModify } from "../api/index"
import { showFailToast, showSuccessToast } from "vant";
const router = useRouter()
const state = reactive({
    prize_list: []
})
const emit = defineEmits(['handleClose'])
const props = defineProps({
    isShow: {
        type: Boolean,//类型字符串
        default: false//如果没有传递msg参数,默认值是这个
    },
})
const info = reactive({
    i_address: '',
    i_phone: ''
})
const cacheInfo = reactive({
    i_address: '',
    i_phone: ''
})
onMounted(() => {
    // 生命周期函数 
    getMyyPrize()
    document.querySelectorAll('input')?.forEach(input => {
        input.addEventListener('focus', (event) => {
        const ua = navigator.userAgent
        const iOS = /iPhone/.test(ua)
        setTimeout(() => {
            if (iOS) {
                document.body.scrollTop = document.body.scrollHeight
            } else {
                console.log(event.target)
                event.target.scrollIntoView(false)
            }
        }, 300);
    })
    })
})

// 获取我的奖品


function getMyyPrize() {

    getGifts().then(res => {
        state.prize_list = res.data.gifts
        Object.assign(info,{i_phone: res.data.input_info.i_phone||'',i_address: res.data.input_info.i_address||''})
        Object.assign(cacheInfo, {i_phone: res.data.input_info.i_phone||'',i_address: res.data.input_info.i_address||''})
    }).catch(() => {
    })
}

// 跳转到海报

function handleShowPoster(id, name) {


    router.push({
        path: '/poster',
        query: {
            id,
            name,
        },
    })
    // router.replace({
    //     path: '/poster',
    //     query: {
    //       id,
    //       name,
    //     },
    // })


}
function handleConfirm() {
    if (cacheInfo.i_address!==info.i_address||cacheInfo.i_phone!==info.i_phone) {
        userInfoModify(info).then(({error_code,msg}) => {
        if (error_code === 0) {
            emit('handleClose',info)
            showSuccessToast('保存成功')
        } else {
            showFailToast(msg)
        }
    }).catch((error) => {
        showFailToast('网络异常')
    })
    } else {
        emit('handleClose',info)
    }
    
    // 
}
function handleGoLottery() {
    router.replace({
        path: '/lottery',

    })
}

</script>
<style  scoped>
:root {
    --left: 23px;
}

.rule-box {

    --left: 23px;
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.prize-inner {
    width: 643px;
    height: 1043px;
    position: relative;
    display: flex;
    justify-content: center;
    border-radius: 30px;
}

.rule_box_data {
    width: 100%;
    height: 100%;
}

.close-icon {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-130%);
    width: 52px;
    height: 52px;
}

.luck_btn {
    position: absolute;
    bottom: 166px;
    width: 218px;
    height: 73px;
    transform: translateX(var(--left));
}

.content {
    position: absolute;
    width: 100%;
    top: 100px;
    height: 600px;
    /* transform: translateX(var(--left)); */
    overflow-y: scroll;
    font-family: "ChangAnunitype-Regular";
    box-sizing: border-box;
    padding: 20px 140px;
    /* padding-bottom: 140px; */

}

.prize-addr {
    position: absolute;
    top: 700px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 80px;
    /* color: #fff; */
    font-size: 32px;
}
.prize-addr .input-item {
    display: flex;
    height: 64px;
    align-items: center;
    
}
.prize-addr .input-item > .label {
    flex: 0 0 100px;
}
.prize-addr .input-item > .value {
    flex: 0 0 calc(100% - 100px);
    height: 100%;
    color: #333;
}
.prize-addr .input-item > .value>input {
    width: 100%;
    height: 100%;
}
.input-item+.input-item {
    margin-top: 20px;
}
.footer {
    /* top: 760px; */
    bottom: -130px;
    padding: 0 36px;
}
.footer > div {
    /* width: 255px;
    height: 64px; */
    margin-bottom: 25px;
    box-shadow: 7px 10px 35px rgba(23, 105, 175, .57);
    border-radius: 50px;
}

.footer>p {
    font-size: 18px;
}

.item.title {
    font-family: "ChangAnunitype-Bold";
    border-bottom: 1px solid #2d68d5;
    
}
.item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* color: black; */
    font-size: 28px;
    /* color: #2d68d5; */
    /* height: 56px; */
    font-family: "ChangAnunitype-Regular";
}

.item_left {
    /* width: 40%; */
    flex: 1;
    font-weight: bolder;
    display: flex;
    flex-direction: column;
    margin: 5px 0;
}

.item_left>span {
    font-size: 20px;
    font-weight: lighter;
}

.item_right {
    /* width: 60%; */
    flex: 1.5;
    /* font-size: 20px; */
    display: flex;
    justify-content: end;
    align-items: center;
    position: relative;
    /* text-align: right; */
    /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
}

.see_poster {
    position: absolute;
    right: 0;
    border: 1px solid #0160a5;
    border-radius: 20px;
    padding: 0px 10px;
    letter-spacing: 2px;
}

.none {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: #0160a5;
    font-size: 40px;
}
</style>